<template>
  <div class="resident-contail">
    <van-pull-refresh v-model="isLoading"
                      @refresh="onRefresh">
      <div class="fengniao-tip"
           v-if="tip">暂时没有数据</div>
      <van-list v-model="loading"
                :finished="finished"
                @load="onLoad">
        <div class="list">
          <div class="item"
               v-for="(item,index) in list"
               :key="index"
               @click.stop="goPage('/notice/detail','',{id:item.id})">
            <div class="img">
              <img v-lazy="item.picTop?`${item.picTop.includes('://')?item.picTop:`${imagesUrl}/${item.picTop}`}`:''"
                   alt=" ">
            </div>
            <div class="info">
              <p class="title"
                 v-text="item.title"></p>
              <p class="text"
                 v-text="item.text"></p>
              <div class="menu">
                <span class="tip">已有{{item.userList?item.userList.length : 0}}人加入</span>
                <p class="btn"
                   @click.stop="join(item,index)"
                   v-if="!isWuye">
                  <span>申请加入</span>
                  <van-icon name="arrow"></van-icon>
                </p>
              </div>
            </div>
          </div>
        </div>
      </van-list>

    </van-pull-refresh>

  </div>
</template>

<script>
import { validatenull } from '@/util/validate';
import { getNews } from '@/api/common';
import { mapGetters } from 'vuex';
import baseCommon from '@/mixins/common.js';
import { join } from '@/api/life/resident';

export default {
  name: 'resident',
  mixins: [baseCommon()],
  data () {
    return {
      list: [],
      isLoading: false,
      loading: false,
      finished: false,
      tip: false,
      page: {
        total: 0,
        type: 1,
        communityId: undefined,
        page: 1,
        limit: 10,
      },
    };
  },
  computed: {
    ...mapGetters(['userInfo', 'community', 'isWuye']),
  },
  created () {
    this.page.communityId = this.community.communityId;
  },
  mounted () { },
  methods: {
    join (item, index) {
      const form = {
        notificationId: item.id,
        createBy: this.userInfo.ownerId,
      };
      join(form).then((res) => {
        const data = res.data;
        const success = data.success;
        const msg = data.msg;
        if (!success) {
          this.$message.warning({
            message: msg,
            duration: 1500,
          });
          return;
        }
        this.$message.success({
          message: msg,
          duration: 1500,
        });
        if (validatenull(this.list[index].userList)) {
          this.list[index].userList = [];
        }
        this.list[index].userList.push({});
      });
    },
    onRefresh () {
      this.tip = false;
      this.page.page = 1;
      getNews(this.page).then((res) => {
        const data = res.data;
        this.page.total = data.total;
        this.list = data.records;
        this.isLoading = false;
        this.finished = false;
        this.onLoad();
      });
    },
    onLoad () {
      this.tip = false;
      getNews(this.page).then((res) => {
        this.setPage(res);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.list {
  .item {
    $imgWidth: 113px;
    width: 100%;
    margin-bottom: 10px;
    padding: 5px 20px;
    align-items: flex-start;
    box-sizing: border-box;
    width: 100%;
    background-color: #fff;
    overflow: hidden;
    display: flex;
    .img {
      margin-right: 15px;
      width: $imgWidth;
      height: $imgWidth;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .info {
      width: calc(100% - #{$imgWidth} - 16px);
      padding-top: 16px;
      .title {
        margin-bottom: 12px;
        color: #333;
        font-size: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        height: 30px;
        line-height: 30px;
      }
      .text {
        margin-bottom: 12px;
        color: #919191;
        font-size: 12px;
        line-height: 20px;
      }
      .menu {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        .tip {
          color: #999;
          font-size: 10px;
        }
        .btn {
          display: flex;
          align-items: center;
          color: #666;
          font-size: 14px;
          i {
            margin-top: 1px;
            margin-left: 5px;
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style>

